<template>
  <div>
    <h1 class="tittle">{{ form.tittle }}</h1>
    <van-form
      @submit="onSubmit"
      input-align="center"
      error-message-align="center"
    >
      <!-- 业务办理日期 -->
      <van-field
        readonly
        clickable
        :value="
          form.date != undefined ? new Date(form.date).toLocaleDateString() : ''
        "
        label="业务办理日期"
        placeholder="系统自动生成"
      />
      <!-- 客户接触方式 -->
      <van-field
        readonly
        clickable
        :value="form.touch"
        label="客户接触方式"
        placeholder="选择"
        @click="showTouch = true"
        :rules="[{ required: true, message: '此处必选' }]"
      />
      <van-popup v-model="showTouch" position="bottom">
        <van-picker
          show-toolbar
          :columns="baseform.touch"
          @confirm="onConfirmTouch"
          @cancel="showTouch = false"
        />
      </van-popup>
      <!-- 业务状态登记 -->
      <van-field
        readonly
        clickable
        :value="form.register"
        label="业务状态登记"
        placeholder="选择"
        @click="showRegister = true"
        :rules="[{ required: true, message: '此处必选' }]"
      />
      <van-popup v-model="showRegister" position="bottom">
        <van-picker
          show-toolbar
          :columns="baseform.register"
          @confirm="onConfirmregister"
          @cancel="showRegister = false"
        />
      </van-popup>
      <!-- 办理套餐 -->
      <van-field
        readonly
        clickable
        :value="form.success"
        label="办理套餐"
        placeholder="选择"
        @click="showSuccess = true"
        :rules="[{ required: true, message: '此处必选' }]"
      />
      <van-popup v-model="showSuccess" position="bottom">
        <van-picker
          show-toolbar
          :columns="baseform.success"
          @confirm="onConfirmSuccess"
          @cancel="showSuccess = false"
        />
      </van-popup>
      <!-- 客户姓名 -->
      <van-field
        v-if="form.register === '成功'"
        v-model="form.客户姓名"
        label="客户姓名"
        placeholder="选择"
        :rules="[{ required: true, message: '此处必填' }]"
      />
      <!-- 手机型号 -->
      <van-field
        readonly
        clickable
        v-if="form.register === '成功'"
        v-model="form.phonemodel"
        label="手机型号"
        placeholder="手机型号"
        @click="showphonemodel = true"
        :rules="[{ required: true, message: '此处必填' }]"
      />
      <van-popup v-model="showphonemodel" position="bottom">
        <van-picker
          show-toolbar
          :columns="baseform.phonemodel"
          @confirm="onConfirmModel"
          @cancel="showphonemodel = false"
        />
      </van-popup>
      <!-- 手机串码 -->
      <van-field
        v-if="form.register === '成功'"
        v-model="form.phoneIM"
        label="手机串码"
        placeholder="手机串码"
        :rules="[{ required: true, message: '此处必填' }]"
      />
      <!-- 礼品选择1 -->
      <van-field
        readonly
        clickable
        :value="gift"
        label="赠送礼品1"
        placeholder="选择"
        @click="showgift = true"
        v-if="form.register === '成功'"
      />
      <!-- :rules="[{ required: true, message: '此处必选' }]" -->
      <van-popup v-model="showgift" position="bottom">
        <van-picker
          show-toolbar
          :columns="giftlist"
          value-key="_id"
          @confirm="onConfirmgift"
          @cancel="showgift = false"
        />
      </van-popup>
      <!-- 礼品选择2 -->
      <van-field
        readonly
        clickable
        :value="gift2"
        label="赠送礼品2"
        placeholder="选择"
        @click="showgift2 = true"
        v-if="form.register === '成功'"
      />
      <van-popup v-model="showgift2" position="bottom">
        <van-picker
          show-toolbar
          :columns="giftlist"
          value-key="_id"
          @confirm="onConfirmgift2"
          @cancel="showgift2 = false"
        />
      </van-popup>
      <!-- 图片区 -->
      <van-row>
        <!-- 客户手机IMEI登记 -->
        <van-col span="8">
          <span>业务受理单上传</span>
          <van-field>
            <template #input>
              <van-uploader
                name="path1"
                v-model="fileList1"
                multiple
                :max-count="1"
                :after-read="afterRead"
              />
            </template>
          </van-field>
        </van-col>
        <!-- 和商汇登记IMEI -->
        <van-col span="8">
          <span>新手机IM上传</span>
          <van-field>
            <template #input>
              <van-uploader
                name="path2"
                v-model="fileList2"
                multiple
                :max-count="1"
                :after-read="afterRead"
              />
            </template>
          </van-field>
        </van-col>
        <!-- 上门失败合照 -->
        <van-col span="8">
          <span>上门失败合照</span>
          <van-field>
            <template #input>
              <van-uploader
                name="path3"
                v-model="fileList3"
                multiple
                :max-count="1"
                :after-read="afterRead"
              />
            </template>
          </van-field>
        </van-col>
      </van-row>
      <van-field v-model="form.leave" label="备注" placeholder="备注" />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
      <div style="height: 3rem"></div>
    </van-form>
  </div>
</template>

<script>
import { Notify, Toast } from 'vant'
export default {
  data() {
    return {
      showphonemodel: false,
      showRegister: false,
      showSuccess: false,
      showTouch: false,
      // 表单数据
      form: {},
      baseform: {
        touch: ['电话', '上门'],
        register: [
          {
            text: '成功',
            children: [{ text: '成功' }],
          },
          {
            text: '电话无人接听',
            children: [{ text: '电话无人接听' }],
          },
          {
            text: '客户不在东莞',
            children: [{ text: '客户不在东莞' }],
          },
          {
            text: '客户不愿意或无法授权支付宝',
            children: [
              {
                text: '客户无支付宝',
              },
              {
                text: '客户支付宝额度不够',
              },
              {
                text: '不愿意承诺使用2年',
              },
              {
                text: '不愿意预存960',
              },
              {
                text: '不愿意预存300',
              },
            ],
          },
          {
            text: '客户不愿意升套餐',
            children: [
              {
                text: '不愿意使用189套餐',
              },
              {
                text: '不愿意使用139套餐',
              },
              {
                text: '不愿意使用89套餐',
              },
              {
                text: '不愿意使用109套餐',
              },
            ],
          },
          {
            text: '不接受礼品',
            children: [
              {
                text: '不接受礼品',
              },
            ],
          },
          {
            text: '客户反悔或客户其他原因',
            children: [
              {
                text: '客户反悔',
              },
              {
                text: '客户没空',
              },
              {
                text: '现在或以后不使用当前号码',
              },
              {
                text: '客户不知道情,拒绝办理',
              },
              {
                text: '号码是公司号码',
              },
              {
                text: '不愿意见面',
              },
              {
                text: '客户不相信活动',
              },
              {
                text: '其他',
              },
            ],
          },
          {
            text: '套餐互斥',
            children: [
              {
                text: '套餐互斥',
              },
            ],
          },
        ],
        success: [
          '59套餐',
          '89套餐',
          '109套餐',
          '119套餐',
          '139套餐',
          '189套餐',
          '199套餐',
          '239套餐',
          '289套餐',
        ],
        phonemodel: [
          'vivoY51S',
          'vivoY73S',
          '华为20Prp',
          'Reno4 SE',
          'OPPO A72',
          'Y52S',
          'Rone5',
          '红米 Note9',
          '送话费',
        ],
      },

      // 相片
      fileList1: [],
      fileList2: [],
      fileList3: [],
      // 礼品
      giftlist: [],
      gift: this.$route.params.gift,
      gift2: this.$route.params.gift2,
      showgift: false,
      showgift2: false,
    }
  },
  created() {
    if (this.$route.params.projectId !== undefined) {
      if (this.$route.params.form !== undefined) {
        this.form = this.$route.params.form

        if (this.$route.params.form.image1 !== undefined) {
          this.fileList1.push({ url: this.$route.params.form.image1 })
        }
        if (this.$route.params.form.image2 !== undefined) {
          this.fileList2.push({ url: this.$route.params.form.image2 })
        }
        if (this.$route.params.form.image3 !== undefined) {
          this.fileList3.push({ url: this.$route.params.form.image3 })
        }
      }
    } else {
      this.$router.go(-1)
      return Notify({ type: 'warning', message: '上一页已失效!' })
    }
    this.getgift()
  },
  methods: {
    // 提交表单
    async onSubmit(values) {
      const { data: res } = await this.$http.put('hx/sellbuylist/upform', {
        form: this.form,
        _id: this.$route.params.projectId,
      })
      if (res.meta.status !== 200) {
        Notify({ type: 'danger', message: res.meta.msg })
        return
      }
      Notify({ type: 'success', message: res.meta.msg })
      this.$router.push('/msellbuys')
    },
    //客户接触方式
    onConfirmTouch(value) {
      this.form.touch = value
      this.showTouch = false
    },
    // 业务状态登记
    onConfirmregister(values) {
      this.form.register = values[1]
      this.showRegister = false
    },
    //办理套餐
    onConfirmSuccess(values) {
      this.form.success = values
      this.showSuccess = false
    },
    //手机型号
    onConfirmModel(values) {
      this.form.phonemodel = values
      this.showphonemodel = false
    },
    // 图片上传
    async afterRead(file, name) {
      let filename = {
        path: name.name,
        projectId: this.$route.params.projectId,
      }
      let formdata = new FormData()
      formdata.append('file', file.file)
      formdata.append('path', JSON.stringify(filename))
      file.status = 'uploading'
      file.message = '上传中...'
      const { data: res } = await this.$http.post(
        'hx/sellbuylist/upimage',
        formdata
      )
      if (res.meta.status !== 200) {
        file.status = 'failed'
        file.message = '上传失败'
        Notify({ type: 'danger', message: res.meta.msg })
        return
      }
      file.status = 'done'
      file.message = '上传成功'
      Notify({ type: 'success', message: res.meta.msg })
    },
    // 礼品1选择上传
    async onConfirmgift(row) {
      if (row === undefined) {
        return
      }
      const { data: res } = await this.$http.post('hx/usegiftsell', {
        giftName: row,
        num: 1,
        projectId: this.$route.params.projectId,
        phoneNum: this.$route.params.phoneNum,
      })
      if (res.meta.status !== 200) {
        return Notify({ type: 'danger', message: res.meta.msg })
      }
      Toast(res.meta.msg)
      this.gift = row._id
    },
    //礼品2选择上传
    async onConfirmgift2(row) {
      if (row === undefined) {
        return
      }
      const { data: res } = await this.$http.post('hx/usegift2sell', {
        giftName: row,
        num: 1,
        projectId: this.$route.params.projectId,
        phoneNum: this.$route.params.phoneNum,
      })
      if (res.meta.status !== 200) {
        return Notify({ type: 'danger', message: res.meta.msg })
      }
      Toast(res.meta.msg)
      this.gift2 = row._id
    },
    // 获取仓库礼品
    async getgift() {
      const { data: res } = await this.$http.post('hx/getgiftlist')
      let obj = {
        _id: '无礼品赠送',
      }
      this.giftlist = res.data
      this.giftlist.push(obj)
    },
  },
}
</script>

<style lang="less" scope>
.van-col {
  span {
    margin: 0 10px;
  }
}

.tittle {
  text-align: center;
}
</style>